import { Button, Flex, Layout } from 'antd';
import { Content, Footer, Header } from 'antd/es/layout/layout';
import type { CSSProperties } from 'react';
import LoginHeader from '../../components/login/LoginHeader';
import LoginForm from '../../components/login/LoginForm';

const layoutStyle: CSSProperties={

    width: '100%',
    minHeight: '100vh',
    background: '#f7f5f5',
    minWidth:'1190px'


}
const headerStyle: CSSProperties={

     width: '100%',
    background: '#fff',
    height: '100px',
    padding:"20px",
    lineHeight:'inherit'

}

const contentStyle: CSSProperties={
    
    display:'flex',
    justifyContent:'center',
    alignItems:'center',
    minHeight: 'calc(100vh - 200px)',
    padding:'30px 0px'

   
}
const footerStyle: CSSProperties={

    width: '100%',
    background: 'red',
    height: '100px',
   
}
 
function Login() {

    return (
        <Flex vertical>

            <Layout style={layoutStyle}>
                <Header style={headerStyle}>
                    <LoginHeader></LoginHeader>
                </Header>
                <Content style={contentStyle}>
                     <LoginForm></LoginForm>
                </Content>
                <Footer style={footerStyle}>Footer</Footer>
            </Layout>


        </Flex>
    )

}

export default Login;